<template>
  <div style="margin-left:20px">
    <el-row>
      <el-col :span="12">
        <h3>一、按钮</h3>
        <div>
          <h4>1.1、基础用法</h4>
          <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary" @click="clickButton()">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
        </div>

        <div>
          <h4>1.2、文字按钮</h4>
          <el-row>
            <el-button type="text">文字按钮</el-button>
            <el-button type="text" disabled>文字按钮</el-button>
          </el-row>
        </div>

        <div>
          <h4>1.3、图标按钮</h4>
          <el-row>
            <el-button type="primary" icon="el-icon-delete"></el-button>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
          </el-row>
        </div>

        <div>
          <h4>1.4、按钮组</h4>
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
            <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          </el-button-group>
        </div>

        <div>
          <h4>1.5、不同尺寸按钮</h4>
          <el-row>
            <el-button>默认按钮</el-button>
            <el-button size="medium">中等按钮</el-button>
            <el-button size="small">小型按钮</el-button>
            <el-button size="mini">超小按钮</el-button>
          </el-row>
        </div>

        <div>
          <h4>1.5、加载中</h4>
          <el-button type="primary" :loading="true">加载中</el-button>
        </div>

      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、文字链接</h3>
        <div>
          <h4>2.1、基础用法</h4>
          <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link>
          <el-link type="primary">主要链接</el-link>
          <el-link type="success">成功链接</el-link>
          <el-link type="warning">警告链接</el-link>
          <el-link type="danger">危险链接</el-link>
          <el-link type="info">信息链接</el-link>
        </div>

        <div>
          <h4>2.1、图标</h4>
          <el-link icon="el-icon-edit">编辑</el-link>
          <el-link>查看<i class="el-icon-view el-icon--right"></i> </el-link>
        </div>

      </el-col>

    </el-row>

  </div>
</template>

<script>

export default {
  data () {
    return {
      loading: false,

    }
  },


  methods: {

    clickButton () {
      console.log(44444)

    },

  }


}
</script>

<style scoped>
.line {
  border-left: 1px solid #9e9e9e;
  height: 1000px;
  margin-left: 8px;
}
</style>